<template>
  <el-container class="coupon-view panel-block">
    <el-header class="sa-header">
      <div class="sa-title sa-flex sa-row-between">
        <div class="label sa-flex">
          <span class="left">领取记录</span>
          <search-condition :conditionLabel="filterParams.conditionLabel" @deleteFilter="deleteFilter"></search-condition>
        </div>
        <div>
          <el-button class="sa-button-refresh" icon="RefreshRight" @click="getData()"></el-button>
          <el-button class="sa-button-refresh" icon="Search" @click="openFilter"></el-button>
        </div>
      </div>
    </el-header>
    <el-main class="sa-p-0" v-loading="loading">
      <el-table height="100%" class="sa-table" :data="table.data" stripe @sort-change="onChangeSort">
        <template #empty>
          <sa-empty />
        </template>
        <el-table-column prop="id" label="ID" min-width="90" sortable="custom"> </el-table-column>
        <el-table-column label="用户信息" min-width="150">
          <template #default="scope">
            <sa-user-profile :user="scope.row.user" :id="scope.row.user_id"></sa-user-profile>
          </template>
        </el-table-column>
        <el-table-column prop="status_text" label="使用状态" min-width="120">
          <template #default="scope">
            <div :class="`sa-color--${statusClass[scope.row.status]}`">
              {{ scope.row.status_text || '-' }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="有效期" min-width="320">
          <template #default="scope">
            {{ scope.row.use_start_time }}~{{ scope.row.use_end_time }}
          </template>
        </el-table-column>
        <el-table-column prop="use_time" label="使用时间" min-width="172">
          <template #default="scope">
            {{ scope.row.use_time || '-' }}
          </template>
        </el-table-column>
        <el-table-column prop="order_sn" label="订单号" min-width="280">
          <template #default="scope">
            {{ scope.row.order?.order_sn || '-' }}
          </template>
        </el-table-column>
        <el-table-column prop="create_time" label="领取时间" min-width="172"></el-table-column>
      </el-table>
    </el-main>
    <sa-view-bar>
      <template #right>
        <sa-pagination :pageData="pageData" @updateFn="getData" />
      </template>
    </sa-view-bar>
  </el-container>
</template>
<script setup>
import { onMounted, reactive, ref } from 'vue';
import { api } from './user.service.js';
import { usePagination } from '@/sheep/hooks';
import { useSearch } from '@/sheep/components/sa-table/sa-search/useSearch';
import { composeFilter } from '@/sheep/utils';

import { cloneDeep } from 'lodash';
import { useRoute } from 'vue-router';

const route = useRoute();

const filterParams = reactive({
  tools: {
    user: {
      type: 'tinputprepend',
      field: 'user',
      label: '用户信息',
      placeholder: '请输入查询内容',
      value: {
        field: 'user_id',
        value: '',
      },
      options: [{
        label: '用户ID',
        value: 'user_id',
      },
      {
        label: '用户昵称',
        value: 'user.nickname',
      },
      {
        label: '用户手机号',
        value: 'user.mobile',
      }]
    },
    'order.order_sn': {
      type: 'tinput',
      field: 'order.order_sn',
      label: '订单号',
      placeholder: '请输入订单号',
      value: '',
    },
    status: {
      type: 'tselect',
      field: 'status',
      label: '状态',
      value: '',
      options: {
        data: [{
          label: '未使用',
          value: 'geted',
        },
        {
          label: '已使用',
          value: 'used',
        },
        {
          label: '已过期',
          value: 'expired',
        }],
      },
    },
    create_time: {
      type: 'tdatetimerange',
      field: 'create_time',
      label: '领取时间',
      value: [],
    },
    use_time: {
      type: 'tdatetimerange',
      field: 'use_time',
      label: '使用时间',
      value: [],
    },
  },
  data: {
    user: { field: 'user_id', value: '' },
    'order.order_sn': '',
    status: '',
    create_time: [],
    use_time: [],
  },
  conditionLabel: {},
});
const { openFilter, deleteFilter } = useSearch({ filterParams, getData });


const statusClass = {
  geted: 'info',
  used: 'success',
  expired: 'error',
}

const loading = ref(true);

const table = reactive({
  data: [],
  order: '',
  sort: '',
  selected: [],
});

const { pageData } = usePagination();

// 获取数据
async function getData(page) {
  loading.value = true;
  if (page) pageData.page = page;
  let tempSearch = cloneDeep(filterParams.data);
  let search = composeFilter(tempSearch, {
    'user.nickname': 'like',
    'user.mobile': 'like',
    create_time: 'range',
    use_time: 'range',
  });
  const { data } = await api.couponList(route.query.couponid, {
    page: pageData.page,
    list_rows: pageData.list_rows,
    ...search,
  });
  table.data = data.data;
  pageData.page = data.current_page;
  pageData.list_rows = data.per_page;
  pageData.total = data.total;

  loading.value = false;
}

onMounted(() => {
  getData();
});
</script>
